<template>
  <div class="dz">
    <!-- 导航 -->
    <div class="nav-box">
      <div class="nav box">
        <router-link to="/">
          <img src="../assets/img/dzy/logo.png" alt="logo" />
        </router-link>
        <div>
          <router-link to="/dzy">首页</router-link>
          <router-link to="/">定制案例</router-link>
          <router-link to="/">关于我们</router-link>
        </div>
        <div>
          <h3>
            <i class="el-icon-phone-outline"></i>
            110-112
          </h3>
          <p>09:00~21:00</p>
        </div>
      </div>
    </div>
    <div class="dzlc">
      <div class="box flex">
        <el-tabs
          v-model="active"
          type="border-card"
          style="width: 740px; height: 480px; box-shadow: none; border: none"
        >
          <el-tab-pane name="目的地">
            <span slot="label">
              <i class="el-icon-location-information"></i> 目的地</span
            >
            <div>
              <el-form
                ref="form"
                :model="form"
                label-width="120px"
                style="margin-top: 20px"
              >
                <el-form-item label="定制类型：">
                  <el-radio v-model="form.dzlx" label="企业" border
                    >企业</el-radio
                  >
                  <el-radio v-model="form.dzlx" label="个人" border
                    >个人</el-radio
                  >
                </el-form-item>
                <el-form-item label="目的地：">
                  <el-radio v-model="form.mdds" label="出境" border
                    >出境</el-radio
                  >
                  <el-radio v-model="form.mdds" label="国内" border
                    >国内</el-radio
                  >
                  <el-select
                    v-if="form.mdds == '出境'"
                    v-model="form.mdd"
                    placeholder="请选择目的地"
                  >
                    <el-option label="爱尔兰" value="爱尔兰"></el-option>
                    <el-option label="澳大利亚" value="澳大利亚"></el-option>
                    <el-option label="德国" value="德国"></el-option>
                    <el-option label="法国" value="法国"></el-option>
                  </el-select>
                  <el-select
                    v-if="form.mdds == '国内'"
                    v-model="form.mdd"
                    placeholder="请选择目的地"
                  >
                    <el-option label="浙江" value="浙江"></el-option>
                    <el-option label="海南" value="海南"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                    <el-option label="上海" value="上海"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="出发城市：">
                  <el-select v-model="form.cfcs" placeholder="请选择出发城市">
                    <el-option label="浙江" value="浙江"></el-option>
                    <el-option label="海南" value="海南"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                    <el-option label="上海" value="上海"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="nextTab">下一步</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane name="出游时间">
            <span slot="label"><i class="el-icon-date"></i> 出游时间</span>
            <div class="cysj flex">
              <div class="cfsj" style="width: 450px">
                <el-calendar v-model="cxsj" @click="getCxsj()"> </el-calendar>
              </div>
              <div class="cyts" style="width: 230px">
                <p>请选择出行天数（不含往返交通时间）</p>
                <el-radio-group v-model="cyts" border fill="#fbb957">
                  <el-radio-button label="3-5天"></el-radio-button>
                  <el-radio-button label="6-9天"></el-radio-button>
                  <el-radio-button label="10-15天"></el-radio-button>
                  <el-radio-button label="16天以上"></el-radio-button>
                </el-radio-group>
                <div style="margin-top: 40px">
                  <el-button type="primary" @click="preTab">上一步</el-button>
                  <el-button type="primary" @click="nextTab">下一步</el-button>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="同游伙伴">
            <span slot="label"><i class="el-icon-user"></i> 同游伙伴</span>
            <div class="tyhb flex">
              <div class="hblx">
                <p>选择您的同游伙伴</p>
                <div class="flex">
                  <div
                    @click="
                      getHb('携爱侣');
                      tyhbSelect = 1;
                    "
                    :key="1"
                    :class="{ active: tyhbSelect == 1 }"
                  >
                    <img src="../assets/img/dz/tx/pic30.jpg" alt="" />
                    <p>携爱侣</p>
                  </div>
                  <div
                    @click="
                      getHb('陪父母');
                      tyhbSelect = 2;
                    "
                    :key="2"
                    :class="{ active: tyhbSelect == 2 }"
                  >
                    <img src="../assets/img/dz/tx/pic31.jpg" alt="" />
                    <p>陪父母</p>
                  </div>
                  <div
                    @click="
                      getHb('带孩子');
                      tyhbSelect = 3;
                    "
                    :key="3"
                    :class="{ active: tyhbSelect == 3 }"
                  >
                    <img src="../assets/img/dz/tx/pic32.jpg" alt="" />
                    <p>带孩子</p>
                  </div>
                  <div
                    @click="
                      getHb('三代同游');
                      tyhbSelect = 4;
                    "
                    :key="4"
                    :class="{ active: tyhbSelect == 4 }"
                  >
                    <img src="../assets/img/dz/tx/pic33.jpg" alt="" />
                    <p>三代同游</p>
                  </div>
                  <div
                    @click="
                      getHb('挽闺蜜');
                      tyhbSelect = 5;
                    "
                    :key="5"
                    :class="{ active: tyhbSelect == 5 }"
                  >
                    <img src="../assets/img/dz/tx/pic34.jpg" alt="" />
                    <p>挽闺蜜</p>
                  </div>
                  <div
                    @click="
                      getHb('同哥们');
                      tyhbSelect = 6;
                    "
                    :key="6"
                    :class="{ active: tyhbSelect == 6 }"
                  >
                    <img src="../assets/img/dz/tx/pic35.jpg" alt="" />
                    <p>同哥们</p>
                  </div>
                  <div
                    @click="
                      getHb('陪客户');
                      tyhbSelect = 7;
                    "
                    :key="7"
                    :class="{ active: tyhbSelect == 7 }"
                  >
                    <img src="../assets/img/dz/tx/pic36.jpg" alt="" />
                    <p>陪客户</p>
                  </div>
                  <div
                    @click="
                      getHb('企业团体');
                      tyhbSelect = 8;
                    "
                    :key="8"
                    :class="{ active: tyhbSelect == 8 }"
                  >
                    <img src="../assets/img/dz/tx/pic37.jpg" alt="" />
                    <p>企业团体</p>
                  </div>
                </div>
              </div>
              <div class="cxrs">
                <p>出行人数</p>
                <div>
                  成人：<el-input v-model="cr" /> 人<br />
                  儿童：<el-input v-model="et" /> 人
                </div>
                <div style="margin-top: 70px">
                  <el-button type="primary" @click="preTab">上一步</el-button>
                  <el-button type="primary" @click="nextTab">下一步</el-button>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="常住酒店">
            <span slot="label"><i class="el-icon-school"></i> 常住酒店</span>
            <div class="czjd">
              <p>选择您喜欢的酒店类型</p>
              <div class="flex">
                <div
                  class="jd-item"
                  @click="
                    getJd('奢华型');
                    czjdSelect = 1;
                  "
                  :key="1"
                  :class="{ active: czjdSelect == 1 }"
                >
                  <img src="../assets/img/dz/jdlx/pic38.jpg" alt="" />
                  <p>奢华型</p>
                </div>
                <div
                  class="jd-item"
                  @click="
                    getJd('豪华型');
                    czjdSelect = 2;
                  "
                  :key="2"
                  :class="{ active: czjdSelect == 2 }"
                >
                  <img src="../assets/img/dz/jdlx/pic39.jpg" alt="" />
                  <p>豪华型</p>
                </div>
                <div
                  class="jd-item"
                  @click="
                    getJd('舒适型');
                    czjdSelect = 3;
                  "
                  :key="3"
                  :class="{ active: czjdSelect == 3 }"
                >
                  <img src="../assets/img/dz/jdlx/pic40.jpg" alt="" />
                  <p>舒适型</p>
                </div>
                <div
                  class="jd-item"
                  @click="
                    getJd('经济型');
                    czjdSelect = 4;
                  "
                  :key="4"
                  :class="{ active: czjdSelect == 4 }"
                >
                  <img src="../assets/img/dz/jdlx/pic41.jpg" alt="" />
                  <p>经济型</p>
                </div>
                <div
                  class="jd-item"
                  @click="
                    getJd('民宿');
                    czjdSelect = 5;
                  "
                  :key="5"
                  :class="{ active: czjdSelect == 5 }"
                >
                  <img src="../assets/img/dz/jdlx/pic42.jpg" alt="" />
                  <p>民宿</p>
                </div>
              </div>
              <div style="margin-top: 10px; margin-left: 250px">
                <el-button type="primary" @click="preTab">上一步</el-button>
                <el-button type="primary" @click="nextTab">下一步</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="预算">
            <span slot="label"><i class="el-icon-money"></i> 预算</span>
            <div class="ys">
              <p>选择您的人均旅行预算</p>
              <div class="flex">
                <div class="ys-item" @click="getYs('5000以下')">
                  <img src="../assets/img/dz/yusuan.png" alt="" />
                  <p>5000以下</p>
                </div>
                <div class="ys-item" @click="getYs('5001-15000')">
                  <img src="../assets/img/dz/yusuan.png" alt="" />
                  <p>5001-15000</p>
                </div>
                <div class="ys-item" @click="getYs('15001-30000')">
                  <img src="../assets/img/dz/yusuan.png" alt="" />
                  <p>15001-30000</p>
                </div>
                <div class="ys-item" @click="getYs('30001-50000')">
                  <img src="../assets/img/dz/yusuan.png" alt="" />
                  <p>30001-50000</p>
                </div>
                <div class="ys-item" @click="getYs('50001以上')">
                  <img src="../assets/img/dz/yusuan.png" alt="" />
                  <p>50001以上</p>
                </div>
                <div class="ys-item" @click="getYs('不确定')">
                  <img src="../assets/img/dz/yusuan.png" alt="" />
                  <p>不确定</p>
                </div>
              </div>
              <div style="margin-top: 10px; margin-left: 250px">
                <el-button type="primary" @click="preTab">上一步</el-button>
                <el-button type="primary" @click="nextTab">下一步</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="联系信息">
            <span slot="label"><i class="el-icon-position"></i> 联系信息</span>
            <div class="lxxx">
              <p>
                请输入您的联系信息，方便我们的旅游管家为您提供1对1的旅游定制服务。
              </p>
              <div>
                您的姓名：<el-input v-model="name"></el-input><br />
                手机号码：<el-input v-model="phone"></el-input><br />
                电子邮箱：<el-input v-model="email"></el-input>
              </div>
              <p>
                【温馨提示】提交需求后，非会员将自动升级为悠哉会员，享受会员专属服务。
              </p>
              <el-button
                type="primary"
                @click="preTab"
                style="margin-top: 30px; margin-left: 300px"
                >上一步</el-button
              >
            </div>
          </el-tab-pane>
          <el-tab-pane disabled>
            <span slot="label"><i class="el-icon-document"></i> 预览</span>
          </el-tab-pane>
        </el-tabs>
        <div class="yl">
          <div class="title">我的优定制 · 预览</div>
          <div class="yld">
            <table>
              <tr>
                <td>定制类型：</td>
                <td>
                  <span v-if="form.dzlx">{{ form.dzlx }}</span>
                </td>
              </tr>
              <tr>
                <td>目的地：</td>
                <td>
                  <span v-if="form.mdd">{{ form.mdd }}</span>
                </td>
              </tr>
              <tr>
                <td>出发城市：</td>
                <td>
                  <span v-if="form.cfcs">{{ form.cfcs }}</span>
                </td>
              </tr>
              <tr>
                <td>出游时间：</td>
                <td>
                  <span v-if="cxsj">{{ cxsj }}</span>
                  <span v-if="cyts">{{ cyts }}</span>
                </td>
              </tr>
              <tr>
                <td>同游伙伴：</td>
                <td>
                  <span v-if="hblx">{{ hblx }}</span>
                  <span v-if="cr">{{ cr }}</span>
                  <span v-if="et">{{ et }}</span>
                </td>
              </tr>
              <tr>
                <td>常住酒店：</td>
                <td>
                  <span v-if="czjd">{{ czjd }}</span>
                </td>
              </tr>
              <tr>
                <td>预算：</td>
                <td>
                  <span v-if="ys">{{ ys }}</span>
                </td>
              </tr>
              <tr>
                <td>联系人信息：</td>
                <td>
                  <span v-if="name">{{ name }}</span>
                  <span v-if="phone">{{ phone }}</span>
                </td>
              </tr>
              <tr>
                <td>电子邮箱：</td>
                <td>
                  <span v-if="email">{{ email }}</span>
                </td>
              </tr>
            </table>
          </div>
          <div class="submit">
            <el-button round>提交</el-button>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="dzbz">
          <h2>3步定制</h2>
          <div class="flex">
            <div class="step flex">
              <img src="../assets/img/dz/yezi.png" alt="" />
              <span
                >通过在线、电话或微信提交定制需求，1对1旅游管家为您提供服务</span
              >
            </div>
            <div class="step flex">
              <img src="../assets/img/dz/yezi.png" alt="" />
              <span>为您量身定制出行计划，沟通确定行程，报价和签约付款。</span>
            </div>
            <div class="step flex">
              <img src="../assets/img/dz/yezi.png" alt="" />
              <span>全程跟踪服务，为您和家人提供美好的旅游体验。</span>
            </div>
          </div>
          <p>联系我们：110-112 工作时间：09:00 AM—21:00 PM</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "目的地",
      form: {
        dzlx: "",
        mdds: "",
        mdd: "",
        cfcs: "",
      },
      cxsj: "",
      cyts: "",
      hblx: "",
      cr: "",
      et: "",
      czjd: "",
      ys: "",
      name: "",
      phone: "",
      email: "",
      tyhbSelect: 1,
      czjdSelect: 1,
    };
  },

  watch: {
    cxsj() {
      this.getCxsj();
    },
  },
  methods: {
    getCxsj() {
      console.log("点到了");
      let time = this.cxsj;
      console.log(time);
      let nian = time.getFullYear();
      let yue = time.getMonth();
      let ri = time.getDate();
      this.cxsj = `${nian}-${yue}-${ri}`;
      console.log("点到了");
    },
    nextTab() {
      if (this.active == "目的地") {
        this.active = "出游时间";
      } else if (this.active == "出游时间") {
        this.active = "同游伙伴";
      } else if (this.active == "同游伙伴") {
        this.active = "常住酒店";
      } else if (this.active == "常住酒店") {
        this.active = "预算";
      } else {
        this.active = "联系信息";
      }
    },
    preTab() {
      if (this.active == "联系信息") {
        this.active = "预算";
      } else if (this.active == "预算") {
        this.active = "常住酒店";
      } else if (this.active == "常住酒店") {
        this.active = "同游伙伴";
      } else if (this.active == "同游伙伴") {
        this.active = "出游时间";
      } else {
        this.active = "目的地";
      }
    },
    getHb(hb) {
      this.hblx = hb;
    },
    getJd(lx) {
      this.czjd = lx;
    },
    getYs(money) {
      this.ys = money;
    },
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}
.box {
  width: 1140px;
  margin: 10px auto;
  color: #544641;
}
.flex {
  display: flex;
  justify-content: space-between;
}
// nav导航
.nav-box {
  border-bottom: 1px solid #efefef;
  > .nav {
    display: flex;
    justify-content: space-evenly;
    > div {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      > a {
        color: #544641;
        font-size: 16px;
        font-weight: bold;
        &:hover {
          color: #c5953b;
        }
      }
    }
    > div:nth-child(2) {
      width: 600px;
    }
    > div:last-child {
      flex-direction: column;
      align-items: flex-end;
    }
  }
}
.dzlc {
  font-size: 14px;
  color: #333;
  background: url("../assets/img/dzy/bg.jpg") no-repeat center 0;
  padding-bottom: 10px;
}

.el-tab-pane {
  button {
    background-color: #fbb957;
    border-color: #fbb957;
    &:hover {
      background-color: #ff8365;
      border-color: #ff8365;
    }
  }
}

::v-deep.el-tabs--border-card {
  > .el-tabs__header {
    background-color: #767676;
    .el-tabs__item {
      color: #fff;
      &:hover {
        color: #fbb957;
      }
    }
    .el-tabs__item.is-active {
      color: #c5953b;
    }
  }
  thead {
    background-color: #fbb957;
    th {
      color: #fff;
    }
  }
}

::v-deep.cfsj {
  .el-calendar-day {
    height: 40px;
  }
}
::v-deep.cyts {
  .el-radio-button {
    width: 160px;
    margin: 10px 0;
    .el-radio-button__inner {
      border-left: 1px solid #dcdfe6;
      width: 100%;
      border-radius: 5px;
      &:hover {
        border-color: #fbb957;
        color: #fbb957;
      }
    }
  }
}

.tyhb {
  justify-content: left;
  .hblx {
    padding: 20px;
    width: 430px;
    > div {
      padding: 20px 10px;
      flex-wrap: wrap;
      > div {
        width: 85px;
        height: 85px;
        text-align: center;
        padding-top: 20px;
        border: 2px solid transparent;
        &:hover {
          border: 2px solid #c5953b;
        }
        img {
          border-radius: 50%;
        }
        &.active {
          border: 2px solid #c5953b;
          background-image: url("../assets/img/dz/selected.png");
          background-size: 20px;
          background-repeat: no-repeat;
          background-position: 65px 85px;
        }
      }
    }
  }
  .cxrs {
    // width: 320px;
    padding-top: 20px;
    > div {
      margin-top: 20px;
      .el-input {
        width: 100px;
        margin-top: 5px;
      }
    }
  }
}

.czjd {
  padding: 20px;
  > div {
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
    .jd-item {
      width: 25%;
      text-align: center;
      padding: 15px;
      border: 2px solid transparent;
      &:hover {
        border: 2px solid #c5953b;
      }
      img {
        width: 80%;
      }
      &.active {
        border: 2px solid #c5953b;
        background-image: url("../assets/img/dz/selected.png");
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 177px 119px;
      }
    }
  }
}

.ys {
  padding: 20px;
  > div {
    flex-wrap: wrap;
    margin-top: 20px;
    justify-content: space-around;
    .ys-item {
      width: 20%;
      text-align: center;
      padding: 15px;
      border: 2px solid transparent;
      &:hover {
        border: 2px solid #fbb957;
      }
      img {
        width: 50%;
      }
    }
  }
}

.lxxx {
  padding: 20px;
  > div {
    margin: 20px 0;
    margin-left: 100px;
    .el-input {
      width: 200px;
      margin-top: 10px;
    }
  }
}

.yl {
  width: 100%;
  background-color: #fff;
  > .title {
    background-color: #767676;
    color: #fff;
    text-align: center;
    height: 38px;
    line-height: 38px;
  }
  table {
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 0 30px;
    border-left: 1px solid #dbdbdb;
    > tr {
      height: 35px;
      > td {
        > span {
          display: inline-block;
          padding: 2px 15px;
          border-radius: 5px;
          background-color: #fbb957;
          color: #fff;
        }
      }
      > td:first-child {
        text-align: end;
      }
    }
  }
  .submit {
    text-align: center;
    button {
      background-color: #fbb957;
      color: #fff;
      width: 150px;
      &:hover {
        background-color: #ff8365;
      }
    }
  }
}

// 定制步骤
.box {
  background-color: #fff;
}
.dzbz {
  text-align: center;
  margin: 0 50px;
  margin-top: -10px;
  border-top: 1px solid #dbdbdb;
  h2 {
    padding-top: 30px;
  }
  .step {
    padding: 20px 5px;
    width: 30%;
    align-items: center;
    > span {
      vertical-align: middle;
    }
    img {
      width: 50px;
    }
  }
  p {
    color: #fbb957;
    padding: 20px 0;
  }
}
</style>
